
let vsource=`
 
   attribute vec2 a_position;
   attribute vec4 a_color;
   varying vec4 color;
    void main()
    {
       gl_Position=vec4(a_position,1,1);
       color=a_color;
    }
`;
let fsource=`
    precision mediump float;
    varying vec4 color;
    void main() 
    {
      gl_FragColor=color;
    }
`;
let gl=null;
function pageInit()
{
    var canvas=document.getElementById("canvas");

    gl=canvas.getContext("webgl");
    if(!gl){
        let msg=document.createElement("div");
        msg.innerText="you browser dose not suport webgl";
        document.append(msg);
        return;
    }
    
    appInit();

}
function appInit()
{
    var vertexShader = createShader(gl, gl.VERTEX_SHADER, vsource);
    var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fsource);
    var program = createProgram(gl, vertexShader, fragmentShader);
    
    
    var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
    var aColorLocation = gl.getAttribLocation(program, "a_color");
    
    var positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    var positions = [
        0, 0, 0,1,0,1,
        0, 0.5,1,0,0,1,
        0.7, 0.2,0,1,0,1,
      ];
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
      gl.viewport(0,0,gl.canvas.width,gl.canvas.height);

      gl.clearColor(0,0,0,0);
      gl.clear(gl.COLOR_BUFFER_BIT);

      gl.useProgram(program);

      
      
      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
        // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
        var type = gl.FLOAT;   // the data is 32bit floats
        var normalize = false; // don't normalize the data
        var stride = 4*6;        // 0 = move forward size * sizeof(type) each iteration to get the next position
        var offset = 0;        // start at the beginning of the buffer
        gl.enableVertexAttribArray(positionAttributeLocation);
        gl.vertexAttribPointer(
            positionAttributeLocation, 2, type, normalize, stride, offset);

        gl.enableVertexAttribArray(aColorLocation);
        gl.vertexAttribPointer(
            aColorLocation, 4, type, false, stride, 2*4);

        var primitiveType = gl.TRIANGLES;
        var offset = 0;
        var count = 3;
        gl.drawArrays(primitiveType, offset, count);
        
    }




function createProgram(gl, vertexShader, fragmentShader) {
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    var success = gl.getProgramParameter(program, gl.LINK_STATUS);
    if (success) {
      return program;
    }
   
    console.log(gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
  }

  
function createShader(gl, type, source) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (success) {
      return shader;
    }
   
    console.log(gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
  }
  pageInit();